<template>
    <div class="head-container">
        <el-input v-model="deptName" placeholder="请输入" clearable prefix-icon="Search" />
        <div class="scroll-container" style="border-right: 1px solid #e4e7ed;">
            <div class="item" v-if="dataList.length > 0"
                :style="{ background: currentIndex == index ? '#ecf5ff' : '#fff', color: currentIndex == index ? '#409eff' : '#333' }"
                v-for="(item, index) in dataList" :key="index" @click="handleNodeClick(item, index)">
                <div class="text-14">
                    {{ item.classifyName }}
                </div>
                <div>
                    <el-button link type="primary" icon="Edit" @click.stop="handleEdit(item)"></el-button>
                </div>
            </div>
            <div v-else>
                <el-empty description="暂无数据" />
            </div>
        </div>
        <div style="width: 100%; text-align: center;;">
            <el-button icon="Plus" @click.stop="handleAdd" type="primary">新增</el-button>
        </div>
    </div>
    <el-drawer v-model="drawer" :title="type == 'edit' ? '编辑' : '新增'" direction="rtl">
        <h3 class="section-title">基本信息</h3>
        <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
            <el-form-item label="编码" prop="classifyCode">
                <el-input v-model="form.classifyCode" placeholder="请输入编码" />
            </el-form-item>
            <el-form-item label="名称" prop="classifyName">
                <el-input v-model="form.classifyName" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="排序" prop="classifySort">
                <el-input-number v-model="form.classifySort" style="width: 100%;" :min="0" controls-position="right" />
            </el-form-item>
            <div v-if="type == 'edit'">
                <h3 class="section-title mt-40">其他信息</h3>
                <el-form-item label="创建人" prop="createBy">
                    <el-input v-model="form.createBy" :disabled="true" />
                </el-form-item>
                <el-form-item label="创建时间" prop="createTime">
                    <el-input v-model="form.createTime" :disabled="true" />
                </el-form-item>
                <el-form-item label="最后修改人" prop="updateBy">
                    <el-input v-model="form.updateBy" :disabled="true" />
                </el-form-item>
                <el-form-item label="最后修改时间" prop="updateTime">
                    <el-input v-model="form.updateTime" :disabled="true" />
                </el-form-item>
            </div>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="drawer = false">取 消</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
const { proxy } = getCurrentInstance();
import { getTreeData, addBomCategory, updateBomCategory } from "./api";
const drawer = ref(false)
const deptName = ref('')
const type = ref('add')
const form = ref({
    classifyName: '',
    classifySort: 0,
    classifyCode: '',
    createBy: '',
    createTime: '',
    updateBy: '',
    updateTime: '',
})
import { ref, onMounted } from 'vue'
const currentIndex = ref(0)
const dataList = ref([
    {
        id: 100,
        classifySort: 1,
        classifyCode: '100',
        classifyName: '组装',
        children: []
    },
    {
        id: 0,
        classifySort: 2,
        classifyCode: '200',
        classifyName: '自制',

    }
])


/** 监听deptName */
watch(deptName, (val) => {
    if (val) {
        const res = dataList.value.filter(item =>
            item.classifyName.toLowerCase().includes(val.toLowerCase())
        );
        dataList.value = res
    } else {
        getTree()
    }
})

const rules = reactive({
    classifyCode: [{ required: true, message: "编码不能为空", trigger: "blur" }],
    classifyName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
    classifySort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
})

/** 获得列表数据 */
const getTree = async () => {
    // getTreeData().then(res => {
    //     dataList.value = res.data;
    // });
    dataList.value = [
        {
            id: 100,
            classifyName: '组装',
            classifyCode: '100',
        },
        {
            id: 0,
            classifyName: '自制',
            classifyCode: '200',

        }
    ]
}

/** 处理被点击 */
const handleNodeClick = async (row, index) => {
    currentIndex.value = index
    emits('node-click', row)
}
const emits = defineEmits(['node-click', 'edit', 'add'])
// 处理编辑
const handleEdit = (data) => {
    resetForm()
    drawer.value = true
    form.value = data
    type.value = 'edit'
}
// 处理新增
const handleAdd = () => {
    resetForm()
    type.value = 'add'
    drawer.value = true
}
/** 初始化 */
onMounted(async () => {
    // const { data } = await getTreeData()
    // dataList.value = data
    emits('node-click', dataList.value[0])
})
const formRef = ref(null)
const submitForm = async () => {
    proxy.$refs["formRef"].validate(async valid => {
        if (valid) {
            const { code } = type.value == 'edit' ? await updateBomCategory(form.value) : await addBomCategory(form.value)
            if (code == 200) {
                const mse = type.value == 'edit' ? '修改成功' : '新增成功'
                proxy.$modal.msgSuccess(mse);
                drawer.value = false
            } else {
                proxy.$modal.msgError(code.msg)
            }
        }
    });
}
//重置表单
const resetForm = () => {
    nextTick(() => {
        if (!formRef.value) return
        proxy.$refs["formRef"].resetFields();
    })
}
</script>

<style lang="scss" scoped>
.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 16px;
    padding-left: 16px;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        left: 5px;
        top: 0;
        height: 16px;
        width: 4px;
        background: #409eff;
        border-radius: 2px;
    }

    .text-gray {
        font-size: 12px;
        color: #303133;
    }
}

// 添加滚动容器样式
.scroll-container {
    margin-top: 10px;
    flex: 1;
    height: calc(100vh - 350px);
    overflow: auto;
}

.item {
    height: 44px;
    border-radius: 4px;
    line-height: 44px;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
</style>